<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
		<el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()" :label-position="labelPosition" label-width="120px">
			<el-col :span="20">
				<h3>客户标签配置</h3>
				<div class="title_ls"></div>
			</el-col>
			<el-row>
				<el-col :span="20">
					<el-form-item label="标签名称" label-width='160px' prop="name">
						<el-input v-model="dataForm.name" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="标签颜色" label-width='160px' prop="color">
						<el-color-picker v-model="dataForm.color"></el-color-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="标签权重" label-width='160px' prop="weight">
						  <el-input-number v-model="dataForm.weight":min="1" :max="99"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="标签描述" label-width='160px' prop="desc">
						<el-input type="textarea" v-model="dataForm.desc" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				labelPosition: "right",
				skillList: [],
				dataForm: {
					name:'',
					color: '',
					weight:'',
					desc:'',
				},
				dataRule: {
					name: [{
						required: true,
						message: '标签名称不能为空',
						trigger: 'blur'
					}],
					color: [{
						required: true,
						message: '请选择标签颜色',
						trigger: 'blur'
					}],
					weight: [{
						required: true,
						message: '请选择权重',
						trigger: 'blur'
					}],
				}
			}
		},
		created() {
		},
		methods: {
			init(id) {
				var that = this
				this.dataForm.id = id || '';
				this.visible = true
				that.$nextTick(() => {
					that.$refs['dataForm'].resetFields()
					if(this.dataForm.id) {
						// 修改
						this.$http.post('/cc/customer/label/msg',{
							id:this.dataForm.id
						}).then(resp => {
							console.log("修改客户标签回显==>",resp)
							that.dataForm.name = resp.data.name
							that.dataForm.color = resp.data.color
							that.dataForm.weight = resp.data.weight
							that.dataForm.desc = resp.data.desc
						})
					} 
				})
			},
			
			// 表单提交
			dataFormSubmit() {
				var that = this
				that.$refs['dataForm'].validate((valid => {
					if(valid) {
						this.$http.post(`/cc/customer/label/${!this.dataForm.id ? 'save' : 'update'}`, {
							'id': that.dataForm.id || undefined,
							'name': that.dataForm.name,
							'color': that.dataForm.color,
							'weight': that.dataForm.weight,
							'desc': that.dataForm.desc,
						}).then(resp => {
							if(resp.data && resp.data.code === '0') {
								that.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										that.visible = false
										that.$emit('refreshDataList')
									}
								})
							} else {
								that.$message.error(resp.data.message)
							}
						})
					}
				}))

			},
		}

	}
</script>
<style lang="scss">
	#el-popover-5179 {
		height: 240px！important;
	}
	
	.el-icon-question {
		font-size: 30px;
		margin-left: 60px;
		color: #409EFF;
	}
	
	.title_ls {
		width: 100%;
		height: 2px;
		border-top: 2px solid #409EFF;
		clear: both;
		margin-bottom: 20px;
	}
</style>